<template>
  <view>
    <view class="rank">

      <view class="title-text">
        <uni-section class="title-text-section" title="排行榜" sub-title="就知道喝" type="line" titleFontSize="17px">
        </uni-section>
        <uni-icons type="more-filled" @click="gotoList()" class="drink_more"></uni-icons>
      </view>
    </view>
    <scroll-view class="rank-scorll" scroll-x="true">
      <unicloud-db v-slot:default="{data, loading, error, options}" :collection="mydb">
        <view v-if="error">{{error.message}}</view>
        <view v-else>
          <block class="" v-for="(item, i) in data" :key="i">
            <view class="scorll-item">
              <view class="content">
                <img :src="item.background" alt="图片">
                <text>{{item.name}}</text>
              </view>
            </view>
          </block>
        </view>
      </unicloud-db>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    name: "rank",
    props: {
      mydb: {
        type: String,
        default: 'drinkRank'
      }
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .rank {}

  .rank-scorll {
    white-space: nowrap;
    width: 100%;

    .scorll-item {
      display: inline-block;
      text-align: center;
      margin: 15rpx;

      .content {
        display: flex;
        flex-direction: column;


        img {
          width: 70px;
          height: 70px;
        }

        text {
          font-size: 16rpx;
        }

      }

    }
  }
</style>
